<template>
  <div class="home-tab-bar">
    <div class="tab-bars">
      <div
        id="barItem"
        v-for="(item, index) in tabList"
        :class="{ active: index === isActive }"
        :key="index"
        @click="clickBar(index, item.view)"
      >
        {{ item.name }}
      </div>
    </div>
    <component :is="currentView"></component>
  </div>
</template>
<script>
import tab1 from "./tab1";
import tab2 from "./tab2";
import tab3 from "./tab3";

export default {
  name: "HomeTabBar",
  data() {
    return {
      tabList: [
        {
          name: "招聘流程外包",
          view: "tab1",
        },
        {
          name: "残保金优化",
          view: "tab2",
        },
        {
          name: "职业教育",
          view: "tab3",
        },
      ],
      isActive: 0,
      currentView: "tab1"
    };
  },
  components: {
    tab1,tab2,tab3
  },
  computed: {},
  methods: {
    clickBar(i, v) {
      this.isActive = i;
      this.currentView = v
      
    },
  },
};
</script>
<style lang="less" scoped>
.home-tab-bar {
  width: 70%;
  margin: 0 auto;
  .tab-bars {
    width: 50%;
    height: 51px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    #barItem {
      flex: 1;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px
      // padding-bottom: 8px
    }
  }
}
.active {
  border-bottom: cadetblue 3px solid;
}
</style>